<template>
	<div class="userInfo">
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="winPrize">
			<form class="inputDiv smart-green userInfoForm">
				<label for="name">姓名</label>
				<input id="name" type="text" name="name" placeholder="请填写您的姓名" class="text">
				<label for="uploadImg">上传头像<span style="color: red;">(图片小于500k，长宽比例1:1)</span></label>
				<div class="text textDiv">
				点击选择图片
				<input type="file" id="uploadImg" accept="image/*" capture="camera">
				</div>
				<button type="submit" class="btn">提交</button>
			</form>
		</div>
		<footercontent></footercontent>
	</div>
</template>

<script>
	import headercontent from './header'
	import footercontent from './footer'
	import data from '../util/mock'
	import axios from 'axios'
	export default {
  		name: 'userInfo',
  		components:{headercontent,footercontent},
  		data() {
			return {
				headerTitle: "我",
				title:"",
				time:"",
				author:"",
				content:""
			}
		},
  		mounted() {
			this.init();
			console.log(this.$route.params.id);
		},
		methods: {
			init(){
				var _this = this;
				
				axios.get('/test/mockData', {
				  params: {name: "articleDetail",id:_this.$route.params.id}
				}).then(function(res) {
					console.log(res.data);
					_this.title = res.data.article.title;
					_this.time = res.data.article.time;
					_this.author = res.data.article.author;
					_this.content = res.data.article.content;
					
				}).catch(function(error) {
					console.log(error);
				});
			}
		}
	}
</script>

<style>
	.userInfoForm {position: fixed; background: #fff; width: 100%; left: 0; padding: 0 15px; box-sizing: border-box; height: 100%;margin:0;}
</style>